Blog Image

Coding THIS portfolio:

Dec 13, 2019

First Time Coding: Back in university, I took some classes meant to introduce design students to the wild world of programming. Our professor had a knack for making things fun, especially when he explained how blogs and travel journals online were put together. We got our hands dirty with HTML in practical sessions, starting from the basics and working our way up to creating simple layouts. I even managed to whip up a few cute static pages with single columns and three images, but my interest in HTML fizzled out pretty quickly.

Give it a Shot: Fast forward three years, and I found myself knee-deep in User Experience, getting acquainted with the process of building digital products. I hung out with some cool developers in shared workspaces, and one day, while bombarding my team with questions about a landing page we were working on, a friend dropped this bombshell:

"Ever tried coding anything? It's not rocket science once you dive in, and you already get some of the logic behind it. I bet you could pick it up in no time and even lend us a hand!"

Sure, he was overly optimistic, but his enthusiasm was contagious. Despite feeling overwhelmed by the sheer scope of what developers do, I decided to give it a whirl. My friend became my mentor and hooked me up with online courses covering HTML, CSS, JavaScript, and PHP.
I dove into learning, blown away by what front and back-end developers could accomplish. Plus, I was itching to back up my design ideas with some coding know-how. I devoured tons of reading material and videos, even though I hadn't written a single line of code yet. But then, somewhere around a bizarre JavaScript lesson featuring a hipster musician, coupled with some self-doubt about my math skills, I threw in the towel.

The Turning Point: Necessity has a funny way of pushing you out of your comfort zone.
Six months later, I found myself in dire need of an online portfolio for applications.

"Dear Jessica, It’s great to hear about in interest at [master abroad], could you please send us your online portfolio for further evaluation?" - Master's university abroad
"...got a link to your online portfolio?" - Job offer 1
"...Looking for HTML, CSS, and Java skills." - Job offer 2

So my career development was demanding this from me now. I had no time to cry about not fully understanding the language applications anymore, but I never had to. I just needed to reach a goal at a time.

The Game Plan: After failed attempts with Wix and Wordpress, I was determined to crack this code. I mapped out my plan:

  • What I Want: A clean web page for my portfolio.
  • What I Need: A prototype; coding practice; template testing; hosting; a domain.
  • How I'll Do It: Organize my work in a project; tweak HTML templates; dive into coding; research hosting options; brush up on usability and responsiveness.

  • Here are some superficial tips and what I’ve learned through this path and I’m really proud of being able to do that much so I’m sharing here.

    1. Find a template

    This is not always easy but with a bit of research, I could find something nice. Keep in mind the scope of the application and that will narrow down the options. I really like the templates from https://htmltemplates.co/ and Bootstrapious.com because they are clean and nicely implemented.

    2. hoose your text editor and code

    I tried sublime text and visual studio code and ended up with the second because I had seen my friends using before so I felt more confident. And you can always count on Stackoverflow for any doubts. Read HTML and CSS tutorials from Mozilla Developer Network(MDN). They have full and simple explanations of the basic principles, very good for a start. Also, LearnLayout its a very fun choice to tryout layouts in HTML e CSS.


    3. Live check style changes + read

    While you’re changing your code try to run a plugin of live changes. In VS is Live HTML previewer — “command +L+O”. This opens a tab in your preferred browser and here is where you always check your modifications and be sure is getting the way you want. If you modify in styles only, you will need to refresh the page to re-render though.
    These sites and blogs are really cool reading to keep updated.

    4. Copy the needed resource files and folders + choose a host

    I choose to save my files at Github, and it served me very well. It was easy to learn and also it has a connection with VS Code so you can directly save your changes. Plus, it offers free hosting which I totally loved since I wasn't sure of how long would I take to finish my project and didn't have money to spend.


    My last step was to buy a domain (the cheapest I could find), but it's not necessary to have your own domain to build a good portfolio, so that is totally up to you.


    Many thanks to my friends who encourage and helped me along the way.